@charset "utf-8";
/* CSS Document */

@media screen and (max-width:320px){

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	font-family:Verdana, Geneva, sans-serif;
}

section.numeros-primos{
	width: 90%;
	height: 400px;
	margin: auto;
	position:relative;
	background-color: #2b7cb4;
	/*z-index:10;*/
	border: #000 thin	solid;
	border-radius:5px;
	box-shadow: 0px 0px 10px rgba(0,0,0,1);
	background-image:url(../imagem-13-jogos-matematicos/013-008-01-fundo-logotipo-jogos-matematicos.png);
	background-repeat: repeat-y;
	background-position: 50% ;
	cursor:	/*url(../imagem-13-jogos-matematicos/013-008-01-cursor-jogo.jpg),*/ pointer;
}

section.numeros-primos img{
	display:block;
	max-width:100%;
	height:auto;
	margin: 0px 0px 0px -10px;
}

/*AREA DO JOGO */

div.jogo{
	position:absolute;
	width:100%;
	height:100%;
	margin: 0px 0px 0px 0px;
	/*display:flex;*/
	/*flex-direction: row;*/
	/*justify-content: space-around;*/
	/*justify-content: space-between;*/
}

/*BOTOES */

button.botao{
	color: white;
 	background-color:rgb(0, 0, 255, 1);
	position:	absolute;
	z-index: -1;
	font-size:20px;
	font-weight:bolder;
	width:30px;
	height:30px;
	border-radius: 50%;
	animation-name: animacao;
	
}

/*ANIMACAO BOTOES*/

@keyframes animacao {

0% {
	top:0px;
	z-index:-1;
}
	   
1%{
	top:0px; 
	z-index:2;
}

100% {
	top: calc(100% - 35px);
	z-index:2;
}
}

/*ANIMACAO -  BOTOES  E MOEDAS*/

#b1{
	left:0%;
	animation-duration:4s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b3, #m3{
	left:10%;
	animation-duration:5s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b5, #m5{
	left:20%;
	animation-duration:6s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b7, #m7{
	left:30%;
	animation-duration:4s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b9{
	left:40%;
	animation-duration:5s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b11,  #m11{
	left:50%;
	animation-duration:6s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b13, #m13{
	left:60%;
	animation-duration:7s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b15{
	left:70%;
	animation-duration:4s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}


#b17, #m17{
	left:80%;
	animation-duration:5s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b19, #m19{
	left:90%;
	animation-duration:3s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}


/*MOEDAS TRANSPARENTES*/

input.moeda{
	/*color: white;*/
 	background-color:rgba(255, 255, 0, 0.1);
	/*position:relative;*/
	position:absolute;
	/*font-size:20px;*/
	width:30px;
	height:30px;
	border-radius: 50%;
	/*margin: 0px 0px 0px 0px;*/
	/*left:215px;*/
	/*top:268px;*/
	animation-name: animacao;
	-webkit-appearance:none;
	appearance:none;
	/*visibility:hidden;*/
	opacity:0;
}

/*CONTADOR*/

.counter-reset{
   counter-reset: checkboxcounter;
}

.counter-print::after{
   content: "Total: " counter(checkboxcounter) "/7";
   position: absolute;
   font-weight:bolder;
   font-size: 18px;
   line-height: 30px;
   text-align: center;
   display: block;
   width: 120px;
   height: 30px;
   margin:-50px 0px 0px 0px;
   background-color:#FF0;
   box-shadow: 2px 2px 10px black;
   border-radius: 4px;
}

input.moeda:checked{
   counter-increment: checkboxcounter;
   visibility:hidden;
  
}

/*CONTADOR*/

}